<template>
  <button
    :class="buttonClasses"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <div class="button-content">
      <div v-if="loading" class="loading-spinner"></div>
      <slot v-else name="icon">
        <div v-if="icon" class="button-icon" v-html="icon" />
      </slot>
      <span class="button-text">
        <slot>{{ text }}</slot>
      </span>
    </div>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Component } from 'vue'

interface Props {
  type?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
  loading?: boolean
  text?: string
  icon?: Component | string
  block?: boolean
  rounded?: boolean
}

interface Emits {
  (e: 'click', event: Event): void
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'md',
  disabled: false,
  loading: false,
  block: false,
  rounded: false
})

const emit = defineEmits<Emits>()

const buttonClasses = computed(() => [
  'base-button',
  `button-${props.type}`,
  `button-${props.size}`,
  {
    'button-block': props.block,
    'button-rounded': props.rounded,
    'button-loading': props.loading,
    'button-disabled': props.disabled
  }
])

const handleClick = (event: Event) => {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<style scoped>
.base-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  outline: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 6px;
}

.button-md {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 8px;
}

.button-lg {
  height: 48px;
  padding: 0 24px;
  font-size: 16px;
  border-radius: 8px;
}

.button-primary {
  background: var(--primary);
  color: white;
}

.button-primary:hover:not(.button-disabled) {
  background: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.button-secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.button-secondary:hover:not(.button-disabled) {
  background: var(--card-hover);
  color: var(--text);
}

.button-danger {
  background: var(--danger);
  color: white;
}

.button-danger:hover:not(.button-disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
}

.button-success {
  background: var(--success);
  color: white;
}

.button-success:hover:not(.button-disabled) {
  background: #047857;
  transform: translateY(-1px);
}

.button-warning {
  background: var(--warning);
  color: white;
}

.button-warning:hover:not(.button-disabled) {
  background: #b45309;
  transform: translateY(-1px);
}

.button-block {
  width: 100%;
}

.button-rounded {
  border-radius: 50px;
}

.button-loading {
  pointer-events: none;
}

.button-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.button-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .button-md {
    height: 44px;
    font-size: 16px;
  }
  
  .button-sm {
    height: 36px;
    font-size: 14px;
  }
}
</style>